<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="edge" />
        <title>TPV-VC 视讯会议系统</title>
        <link rel="shortcut icon" type="image/png" th:href="@{/img/favicon.ico}" />
        <link rel="stylesheet" th:href="@{/css/login.css(t=${version})}" type="text/css">
        <link rel="stylesheet" th:href="@{/css/iCheck/minimal/tpv.css(t=${version})}" type="text/css">
        <link rel="stylesheet" th:href="@{/css/app.css(t=${version})}" type="text/css">
        <link rel="stylesheet" th:href="@{/css/tpv/login.css(t=${version})}" type="text/css">
        <!-- animate -->
        <link rel="stylesheet" th:href="@{/css/animate/animate.min.css}" type="text/css">

        <script data-th-inline="javascript">
            var LANGUAGE_CODE = [[#{language}]];
        </script>

        <script th:src="@{/js/tether/tether.min.js}"></script>
        <script th:src="@{/js/jquery.min.js}"></script>
        <script th:src="@{/js/jquery.i18n/jquery.i18n.properties.js}"></script>
        <script th:src="@{/js/jquery.i18n/languages.config.js}"></script>
        <script th:src="@{/js/iCheck/icheck.js}"></script>
        <script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
        <script th:src="@{/js/bootstrap-notify/bootstrap-notify.min.js}"></script>
        <script th:src="@{/js/common.js(t=${version})}"></script>
    </head>
    <style type="text/css">
        .meeting-join-id i {
          background: url('/img/tpv/login/login_roomid.png') no-repeat center;
        }

        .meeting-join-password  i {
          background: url('/img/tpv/login/login_password.png') no-repeat center;
        }

        .meeting-join-moderator-password i {
          background: url('/img/tpv/login/login_password.png') no-repeat center;
        }
        .meeting-join-name i {
          background: url('/img/tpv/login/login_account.png') no-repeat center;
        }

        .tpv-join-content {
            margin: 0 36px;
            width: 331px;
            position:absolute;
            bottom:20px;
        }

        .meeting-join-footer-layout {
          margin-top: 12px;
          text-align: right;
        }
        .meeting-join-footer-layout a {
          color: #fff;
          font-size: 18px;
        }
        .meeting-join-footer-layout a:hover {
          color: #337ab7;
        }
    </style>
    <body>
        <div data-th-include="@{vc/meeting/meetingLock}"></div>
        <!-- Form-->
        <div class="form tpv-login-from clearfix">
            <div class="form-toggle"></div>
            <div class="form-panel one tpv-login-layout">
                <div class="form-header tpv-login-header clearfix">
                    <div class="tpv-login-icon"><i data-toggle="modal" data-target="#about-us"></i></div>
                    <ul class="clearfix tpv-login-lang">
                        <li class="active"><a href="#">简体中文</a></li>
                        <li><a href="#">English</a></li>
                    </ul>
                </div>
                <div class="tpv-login-logo">
                    <img data-th-src="@{/img/tpv/login/login_tpv_logo.png}" />
                </div>
                <div class="form-content tpv-join-content">
                    <div class="input-group meeting-join-id">
                        <i></i>
                        <input type="digit" class="form-control tpv-form-input tpv-join-input" name="meetingId" data-th-placeholder="#{meeting.join.meetingid}" autocomplete="new-password"  oninput="value=value.replace(/\D/g,'')" maxlength="6" th:attr="value=${meetingId}">
                    </div>
                    <div class="input-group meeting-join-password">
                        <i></i>
                        <input type="password" class="form-control tpv-form-input tpv-join-input" name="meetingPassword" data-th-placeholder="#{meeting.join.meetingPassword}" autocomplete="new-password" oninput="value=value.replace(/\D/g,'')" maxlength="6"/>
                    </div>
                    <div class="input-group meeting-join-name">
                        <i></i>
                        <input type="text" class="form-control tpv-form-input tpv-join-input" name="name" data-th-placeholder="#{meeting.join.nick}" autocomplete="new-password" maxlength="30"/>
                    </div>
                    <div class="form-group tpv-login-check">
                        <p><label for="moderator"><input type="radio" name="moderator" id="moderator" value="true" checked/><span class="tpv-check-tips" data-th-text="#{meeting.join.moderator}"></span></label></p>
                        <p><label for="moderator"><input type="radio" name="moderator" id="attendee" value="false"/><span class="tpv-check-tips" data-th-text="#{meeting.join.attendee}"></span></label></p>
                    </div>
                    <div class="input-group meeting-join-moderator-password">
                        <i></i>
                        <input type="password" class="form-control tpv-form-input tpv-join-input" name="moderatorPassword" data-th-placeholder="#{meeting.join.moderatorPassword}" autocomplete="new-password" oninput="value=value.replace(/\D/g,'')" maxlength="6"/>
                    </div>
                    <div class="form-group tpv-login-btn">
                        <button id="joinButton" type="button">加入会议</button>
                    </div>
                    <div class="meeting-join-footer-layout">
                        <p><a href="/">帐号登录</a></p>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script data-th-src="@{/js/app/vc/meeting/join.js(t=${version})}"></script>
</html>